New app #18
New app #18
Conversation
stu-k
left a comment
stu-k
left a comment
There was a problem hiding this comment.
Nice use of the Router! There was a little issue with the inputs on the login page because they weren't being set properly, but I made a note about that. Otherwise, you HAVE to make your code look nicer. Logically, this is fine code. Stylistically, this was a mess. React doesn't see whitespace, so having empty lines within JSX is useless. You're still using both 2 and 4 spaces, which on its own is a big no-no, but I also found lines with an ODD number of spaces. Fix the login page thing and all the unnecessary whitespace/horrible indentation and I'll give you a better grade.
| import RaisedButton from 'material-ui/RaisedButton'; | ||
|
|
||
|
|
||
| const HomePage = () => ( |
| @@ -0,0 +1,16 @@ | |||
| import React from 'react'; | |||
| import LoginForm from '../forms/LoginForm'; | |||
|
|
|||
|
|
||
| const LoginPage = () => ( | ||
| <div> | ||
| <h1>Login page</h1> |
| <h1>Login page</h1> | ||
|
|
||
| <LoginForm /> | ||
|
|
| value={data.password} | ||
| onChange={this.onChange} | ||
| /><br /> | ||
|
|
|
|
||
| <br /> | ||
|
|
||
| </Form> |
| hintText="email" | ||
| value={data.email} | ||
| onChange={this.onChange} | ||
| /><br /> |
There was a problem hiding this comment.
Would be easier to follow if the <br /> was on the next line.
| data: { | ||
| email: '', | ||
| password: '' | ||
| }, |
There was a problem hiding this comment.
Indentation. This makes it look like state ends here.
|
|
||
|
|
||
| class LoginForm extends React.Component { | ||
| state = { |
| //in state change data, use spread to save everything that is in data, then what is changed | ||
| //which is an e.target | ||
| onChange = e => this.setState({ | ||
| data: {...this.state.data, [e.target.name]: e.target.value} |
There was a problem hiding this comment.
e.target doesn't have a .name property, so you'll probably be unable to change the input values through typing in them. You could do e.target.dataset.name and then also give your TextFields a data name (<TextField data-name="email">) to achieve the same effect.
stu-k
left a comment
stu-k
left a comment
There was a problem hiding this comment.
Yay intentions! Now whitespace and fix your login page onChange.
08week/newapp/src/App.js
Outdated
| return ( | ||
| // this is a semantic-ui-react also semantic-ui-css container that auto margins | ||
| <div className="ui container"> | ||
|
|
| hintText="email" | ||
| value={data.email} | ||
| onChange={this.onChange} | ||
|
|
| value={data.email} | ||
| onChange={this.onChange} | ||
|
|
||
| /><br/> |
| hintText="password" | ||
| value={data.password} | ||
| onChange={this.onChange} | ||
|
|
| value={data.password} | ||
| onChange={this.onChange} | ||
|
|
||
| /><br/> |
| <RaisedButton primary={true}> | ||
| <Link to='main'>LOGIN</Link> | ||
| </RaisedButton> | ||
|
|
| <h1>Home Page</h1> | ||
| <RaisedButton primary={true}> | ||
| <Link to='login'>LOGIN PAGE</Link> | ||
|
|
| const MainPage = () => ( | ||
| <div> | ||
| <h1>Main page</h1> | ||
|
|
|
|
||
| <img className="pic" src="http://www.simonstalenhag.se/bilderbig/by_procession_1920.jpg"> | ||
| </img> | ||
|
|
| //in state change data, use spread to save everything that is in data, then what is changed | ||
| //which is an e.target | ||
| onChange = e => this.setState({ | ||
| data: {...this.state.data, [e.target.name]: e.target.value} |
Checkpoint Rubric
This is the rubric that your instructor will use to grade your checkpoints. Please do not edit.
Checkpoint 1
Checkpoint 2
Checkpoint 3